<template>
  <div>
    <ul class="entry_person_wrap">
      <li v-for="(item, index) in tableData" :key="index" class="entry_person">
        <div class="person_info">
          <div class="person_name">{{ item.name }}</div>
          <ul>
            <li v-if="gameInfo.isFinal" class="person_entry">
              <span>{{ item.subCompetition ? item.subCompetition.name : '' }}</span>
            </li>
            <li v-for="(jtem, jndex) in item.entrys" :key="jndex" class="person_entry">
              <!-- <span>{{ jtem.event.longName }}</span> -->
              <span>{{ jtem.event.eventGroup.category.name }} </span>
              <span>{{ jtem.event.eventGroup.name }}</span>
              <span>{{ jtem.event.name }}</span>
              <span v-if="jtem.weightClass && jtem.weightClass.name"> ({{ jtem.weightClass.name }}) </span>
              <span v-if="jtem.teamNo">{{ jtem.teamNo }}组</span>
            </li>
          </ul>
        </div>
        <van-row gutter="20" class="confirm_btn_wrap">
          <van-col span="12">
            <div class="confirm_button" @click="clickTableEdit(item)">编辑</div>
          </van-col>
          <van-col span="12">
            <div class="confirm_button" @click="clickTableDel(item)">删除</div>
          </van-col>
        </van-row>
      </li>
      <li v-if="!tableData.length" class="no_entry">
        <van-loading v-show="tableLoading" color="#1989fa" />
        <span v-show="!tableLoading">暂无报名数据，快去报名吧！</span>
      </li>
    </ul>

    <!-- 按钮 -->
    <van-row gutter="10" class="bottom_btn_position">
      <van-col :span="12">
        <van-button type="default" block @click="clickContinue()">继续报名</van-button>
      </van-col>
      <van-col :span="12">
        <van-button type="info" block :loading="confirmEntriesLoading" :disabled="!tableData.length" @click="clickSubmit()">确认报名</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { CopyData } from '@/lib';
import {
  api_GET_EventsManagementEntryByPerson, // 12-查询报项（按个人汇总报项）
  // api_DELETE_EventsManagementEntryComRegister, // 5-1-删除报名,同时删除全部报项，同时删除CompetitionRegister相关联内容  (旧接口，报名拆分需求之前使用)
  api_DELETE_EventsManagementEntryCompetitionRegisters, // 删除报项人员   (新接口，报名拆分需求之后使用)
  api_POST_EventsManagementEntryConfirmEntries // 6-确认报项，只用于非收费赛事，将报项变更为待审核
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementEntryByPersonQO // 11-查询报项（返回报项汇总）
} from '@/lib/form/game/swaggerForm';

export default {
  props: {
    currentUserType: {
      type: String,
      default: ''
    },
    propData: {
      type: Object,
      default() {
        return {};
      }
    },
    gameInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    requiredIdData: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      qo: new Api_GET_EventsManagementEntryByPersonQO(),
      total: 0,
      tableData: [],
      tableLoading: false,
      spanArr: [], // 表格合并
      tableKey: null,
      confirmEntriesLoading: false
    };
  },
  created() {
    delete this.qo.SkipCount;
    delete this.qo.Page;
    delete this.qo.MaxResultCount;
    CopyData(this.propData, this.qo);
    // 移除分页相关属性，获取全部数据
    this.getPageList();
  },
  methods: {
    // 获取页面信息
    getPageList(page) {
      this.tableLoading = true;
      api_GET_EventsManagementEntryByPerson(this.qo)
        .then(
          res => {
            this.tableData = res.items;
            this.total = res.totalCount;
            this.tableLoading = false;
          }
        )
        .catch(
          error => {
            this.tableLoading = false;
            this.$toast.fail(`报项列表获取失败！ ${error.error.message}`);
          }
        );
    },
    // 继续报名
    clickContinue () {
      this.$emit('onContinue');
    },
    // 点击表格编辑row
    clickTableEdit (item) {
      if (this.currentUserType === 'Delegation') {
        this.$emit('onDelegationContinue', item.sourceRegister);
      } else {
        this.$emit('onContinue');
      }
    },
    // 点击表格删除row
    clickTableDel (item) {
      this.$dialog({
        title: '提示',
        message: '您确定要删除该报名吗？',
        showCancelButton: true
      })
        .then(() => {
          const _vo = {
            CompetitionRegisterIds: item.id,
            DelegationId: this.requiredIdData.delegationId,
            CompetitionId: this.gameInfo.id
          };
          if (!this.requiredIdData.delegationId) {
            // 个人报项删除时不可传delegationId 所以当delegationId没有时删除delegationId
            delete _vo.DelegationId;
          }
          this.removeEntry(_vo);
          // this.removeEntry({ comRegisterIds: item.id }); // (旧接口)
        });
    },
    // 移除报名API
    removeEntry (vo) {
      // api_DELETE_EventsManagementEntryComRegister(vo) // (旧接口)
      api_DELETE_EventsManagementEntryCompetitionRegisters(vo)
        .then(res => {
          this.getPageList();
          this.$toast.success(`删除报项成功！`);
        })
        .catch(
          error => {
            this.$toast.fail(`删除报项失败！ ${error.error.message}`);
          }
        );
    },
    // 确认报名
    clickSubmit () {
      const _vo = {
        competitionId: this.gameInfo.id,
        delegationId: this.requiredIdData.delegationId,
        registerId: this.requiredIdData.registerId
      };

      if (this.currentUserType === 'Personal') {
        _vo.delegationId = null;
      }
      this.confirmEntryForGame(_vo);
    },
    confirmEntryForGame (vo) {
      this.confirmEntriesLoading = true;
      api_POST_EventsManagementEntryConfirmEntries(vo)
        .then(
          res => {
            this.confirmEntriesLoading = false;
            this.$emit('onConfirmEntry');
          }
        )
        .catch(
          error => {
            this.confirmEntriesLoading = false;
            this.$toast.fail(`${error.error.message}`);
          }
        );
    }
  }
};
</script>

<style scoped>
.event_border {
  padding: 2px 0;
  border-bottom: 1px solid #dfe6ec;
}
.event_border:last-child{
  border-bottom: none;
}

.entry_person {
  padding: 10px 0;
  margin-bottom: 10px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.10);
}
.person_info {
  padding: 0 15px;
  border-bottom: 1px solid #dbdbdb;
}
.person_name {
  padding-bottom: 5px;
  font-weight: bold;
  font-size: 14px;
  color: #333;
  line-height: 20px;
}

.person_entry {
  width: 100%;
  font-size: 12px;
  color: #666;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.entry_person_wrap {
  margin-bottom: 30px;
}
.confirm_btn_wrap {
  padding: 10px 10px 0;
}
.confirm_button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  font-size: 12px;
  background-color: #F3F3F3;
  color: #333;
}
.no_entry {
  min-height: 120px;
  display: flex;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  color: #666;
}
</style>
